<style>
.avatar-uploader.avatar {
  width: 128px;
  height: 128px;
  display: block;
}

.avatar-uploader.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
}
</style>
<template>
  <div class="jmxg" align="center">
        <el-card style="width: 100%;height: 100%">
          <div class="resident-info" align="left">
            <h3>居民信息</h3>
            <el-row style="text-align: left">
              <p style="height: 10px;">
                <el-form label-width="80px" style="text-align: center;" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 430px;margin-right: 100px;text-align: left">
                    居民编号：{{ residentInfo.id }}
                  </el-form-item>
                  <el-form-item style="float: left;margin-right: 100px" label="姓名">
                    <el-input type="text" style="width: 260px" v-model="residentInfo.name"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left" label="居民头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8202/person/upload"
                        name="file"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                      <img style="width: 30px;height: 30px" v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-form>
              </p>
              <p style="height: 10px;">
                <el-form label-width="80px" style="text-align: center" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 430px;margin-right: 100px;text-align: left">
                    身份证号：<el-input type="text" style="width: 260px" v-model="residentInfo.sfz"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left;margin-right: 100px" label="手机号码">
                    <el-input type="text" style="width: 260px" v-model="residentInfo.sjh"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left" label="居民标签">
                    <el-input type="text" style="width: 260px" v-model="residentInfo.bq"></el-input>
                  </el-form-item>
                </el-form>
              </p>


              <p style="height: 10px;">
                <el-form label-width="80px" style="text-align: center" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 900px;margin-right: 50px;text-align: left">
                    现居地：<el-input type="text" style="width: 735px" v-model="residentInfo.xjd"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left" label="行政区划">
                    <el-input type="text" style="width: 200px" v-model="residentInfo.xzqh"></el-input>
                  </el-form-item>
                </el-form>
              </p>

              <p style="height: 10px;">
                <el-form label-width="80px" style="text-align: center" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 900px;margin-right: 50px;text-align: left">
                    户籍地址：<el-input type="text" style="width: 735px" v-model="residentInfo.hjdz"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left" label="家庭成员">
                    <el-button type="text" v-show="!tj" style="width: 100px" @click="dialogFormVisible=true">+ 关联家庭成员</el-button>
                    <div v-show="tj" style="width: 170px;height: 70px;padding: 10px;background-color: antiquewhite;margin-top: 10px;float: left;margin-right: 15px" v-for="item in this.xs">
                      <img :src="item.img"
                           alt="" style="width: 50px; height: 50px;float: left;">
                      <div style="float:left; margin-left: 20px">
                        <div style="height: 20px;">{{item.name}}&nbsp;&nbsp;<font size="1px" color="#a9a9a9">{{item.age}}岁</font></div>
                        <div style="height: 10px"><font size="1px" color="#a9a9a9">关系：{{item.gx}}</font></div>
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </p>

              <p style="height: 10px;">
                <el-form label-width="80px" style="text-align: center" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 430px;margin-right: 100px;text-align: left">
                    性别：
                    <el-select v-model="residentInfo.sex" placeholder="请选择">
                      <!-- 这里可以添加具体的居民标签选项 -->
                      <el-option label="请选择" value=""></el-option>
                      <el-option label="男" :value="1"></el-option>
                      <el-option label="女" :value="0"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item style="float: left;margin-right: 100px" label="出生年月">
                    <el-date-picker v-model="residentInfo.ctime" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item style="float: left" label="籍贯">
                    <el-input type="text" style="width: 260px" v-model="residentInfo.jg"></el-input>
                  </el-form-item>
                </el-form>
              </p>

              <p style="height: 10px;">
                <el-form label-width="80px" style="text-align: center" :model="residentInfo" label-position="right">
                <el-form-item label="" style="float: left;width: 360px;margin-right: 100px;text-align: left">
                  民族：
                  <el-select v-model="residentInfo.mz" placeholder="请选择">
                    <!-- 这里可以添加具体的居民标签选项 -->
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="汉族" value="汉族"></el-option>
                    <el-option label="回族" value="回族"></el-option>
                    <el-option label="维吾尔族" value="维吾尔族"></el-option>
                    <el-option label="其他少数民族" value="其他少数民族"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="float: left;margin-right: 130px" label="">
                 文化程度：
                  <el-select v-model="residentInfo.whcd" placeholder="请选择">
                    <!-- 这里可以添加具体的居民标签选项 -->
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="小学" value="小学"></el-option>
                    <el-option label="初中" value="初中"></el-option>
                    <el-option label="高中" value="高中"></el-option>
                    <el-option label="大学" value="大学"></el-option>
                    <el-option label="硕士" value="硕士"></el-option>
                    <el-option label="博士" value="博士"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="float: left" label="婚姻状况">
                  <el-select v-model="residentInfo.hy" placeholder="请选择">
                    <!-- 这里可以添加具体的居民标签选项 -->
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="未婚" value="未婚"></el-option>
                    <el-option label="已婚" value="已婚"></el-option>
                    <el-option label="离异" value="离异"></el-option>
                    <el-option label="丧偶" value="丧偶"></el-option>
                  </el-select>
                </el-form-item>
                </el-form>
              </p>
              <el-dialog class="popup" title="关联家庭成员" style="width: 800px;margin-left: 490px;margin-top: 100px"
                         :visible.sync="dialogFormVisible">
                <el-form :model="gl" align="center">
                  <el-form-item>
                    选择成员：
                    <el-select v-model="gl.gid" placeholder="请选择">
                      <el-input placeholder="搜索居民姓名" @input="handleInput" type="text" class="el-input" v-model="gl.name" suffix-icon="el-icon-search"></el-input>
                      <el-option v-for="item in gls" :label="item.name+' '+(item.sex==1?'男':'女')+' '+item.age" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    选择关系：
                    <el-select v-model="gl.gx" placeholder="请选择">
                      <el-option label="请选择" value=""></el-option>
                      <el-option label="父母" value="父母"></el-option>
                      <el-option label="配偶" value="配偶"></el-option>
                      <el-option label="兄弟" value="姐妹"></el-option>
                      <el-option label="姐妹" value="兄弟"></el-option>
                    </el-select>
                  </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
                </div>
              </el-dialog>


            <p style="height: 10px">
              <el-form label-width="80px" style="text-align: center;" :model="residentInfo" label-position="right">
                <el-form-item label="" style="float: left;width: 390px;margin-right: 50px;text-align: left">
                  职业： <el-input type="text" style="width: 260px" v-model="residentInfo.zy"></el-input>
                </el-form-item>
                <el-form-item style="float: left;margin-right: 100px" label="">
                  工作单位：<el-input type="text" style="width: 600px" v-model="residentInfo.gzdw"></el-input>
                </el-form-item>
              </el-form>
            </p>
              <p style="height: 10px">
                <el-form label-width="80px" style="text-align: center;" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 450px;margin-right: 10px;text-align: left">
                    紧急联系人： <el-input type="text" style="width: 260px" v-model="residentInfo.lxr"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left;margin-right: 20px" label="">
                    联系电话：<el-input type="text" style="width: 260px" v-model="residentInfo.lxdh"></el-input>
                  </el-form-item>
                  <el-form-item style="float: left;margin-right: 100px" label="">
                    登陆密码：<el-input type="text" style="width: 260px" v-model="residentInfo.dlmm"></el-input>
                  </el-form-item>
                </el-form>
              </p>
              <p style="height: 10px">
                <el-form label-width="80px" style="text-align: center;" :model="residentInfo" label-position="right">
                  <el-form-item label="" style="float: left;width: 390px;margin-right: 50px;text-align: left">
                    户籍类型：
                    <el-select v-model="residentInfo.hjlx" placeholder="请选择">
                      <!-- 这里可以添加具体的居民标签选项 -->
                      <el-option label="请选择" value=""></el-option>
                      <el-option label="农村" value="农村户口"></el-option>
                      <el-option label="城镇" value="城镇户口"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item style="float: left;margin-right: 100px" label="">
                    定点医疗单位：<el-input type="text" style="width: 600px" v-model="residentInfo.yldw"></el-input>
                  </el-form-item>
                </el-form>
              </p>
              <p style="height: 10px">
                <el-form label-width="80px" style="text-align: center;" :model="residentInfo" label-position="right">
                  <el-form-item label="费用类型" style="float: left;width: 100%;margin-left: 70px;text-align: left">
                    <el-checkbox-group v-model="fy" style="width: 600px">
                      <el-checkbox label="自费" value="自费" name="type"></el-checkbox>
                      <el-checkbox label="医保" value="医保" name="type"></el-checkbox>
                      <el-checkbox label="商业保险" value="商业保险" name="type"></el-checkbox>
                      <el-checkbox label="新农合" value="新农合" name="type"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </p>
            </el-row>
          </div>
                    <div class="resident-health-info"  align="left">
                      <h3>健康信息</h3>
                      <el-row>
                        <p style="height: 10px;">
                          <el-form label-width="80px" style="text-align: center" :model="healthInfo" label-position="right">
                            <el-form-item label="" style="float: left;width: 430px;margin-right: 100px;text-align: left">
                              身高：<el-input type="text" style="width: 260px" v-model="healthInfo.sg"></el-input>cm
                            </el-form-item>
                            <el-form-item style="float: left;margin-right: 100px" label="体重">
                              <el-input type="text" style="width: 260px" v-model="healthInfo.zl"></el-input>kg
                            </el-form-item>
                            <el-form-item style="float: left" label="血型">
                              <el-select v-model="healthInfo.xx" placeholder="请选择">
                                <!-- 这里可以添加具体的居民标签选项 -->
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="A" value="A"></el-option>
                                <el-option label="B" value="B"></el-option>
                                <el-option label="O" value="O"></el-option>
                                <el-option label="AB" value="AB"></el-option>
                              </el-select>型
                            </el-form-item>
                          </el-form>
                        </p>
                        <p style="height: 10px;">
                        <el-form label-width="80px" style="text-align: center;" :model="healthInfo" >
                          <el-form-item style="float: left;margin-left: 70px;margin-right: 1000px" label="RH阴性：">
                            <el-select v-model="healthInfo.yx" placeholder="请选择">
                              <!-- 这里可以添加具体的居民标签选项 -->
                              <el-option label="请选择" value=""></el-option>
                              <el-option label="是" value="阳性"></el-option>
                              <el-option label="否" value="阴性"></el-option>
                              <el-option label="不详" value="不详"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-form>
                      </p>
                      <div style="height: 10px">
                        <el-form label-width="80px" style="text-align: center" :model="healthInfo" label-position="right">
                          <el-form-item style="float: left;margin-left: 70px;margin-right: 1000px" label="过敏史：">
                            <el-radio-group v-model="healthInfo.gms">
                              <el-radio  label="无" value="无"></el-radio>
                              <el-radio  label="有" value="有" ></el-radio>
                              <el-input v-show="healthInfo.gms=='有'" type="text" style="width: 260px" v-model="gms"></el-input>
                            </el-radio-group>
                          </el-form-item>
                        </el-form>
                      </div>

                        <p style="height: 10px;">
                          <el-form label-width="80px" style="text-align: center" :model="healthInfo" label-position="right">
                            <el-form-item style="float: left;margin-left: 70px;margin-right: 1000px" label="既往史：">
                              <el-radio-group v-model="healthInfo.jwd">
                                <el-radio  label="无" value="无"></el-radio>
                                <el-radio  label="有" value="有" ></el-radio>
                                <el-input v-show="healthInfo.jwd=='有'" type="text" style="width: 260px" v-model="jwd"></el-input>
                              </el-radio-group>
                            </el-form-item>
                          </el-form>
                        </p>
                        <p style="height: 10px;">
                          <el-form label-width="80px" style="text-align: center" :model="healthInfo" label-position="right">
                            <el-form-item style="float: left;margin-left: 70px;margin-right: 1000px" label="既往史：">
                              <el-radio-group v-model="healthInfo.jzs">
                                <el-radio  label="无" value="无"></el-radio>
                                <el-radio  label="有" value="有" ></el-radio>
                                <el-input v-show="healthInfo.jzs=='有'" type="text" style="width: 260px" v-model="jzs"></el-input>
                              </el-radio-group>
                            </el-form-item>
                          </el-form>
                        </p>
                        <p style="height: 10px;">
                          <el-form label-width="80px" style="text-align: center" :model="healthInfo" label-position="right">
                            <el-form-item style="float: left;margin-left: 70px;margin-right: 1000px" label="既往史：">
                              <el-radio-group v-model="healthInfo.jzbs">
                                <el-radio  label="无" value="无"></el-radio>
                                <el-radio  label="有" value="有" ></el-radio>
                                <el-input v-show="healthInfo.jzbs=='有'" type="text" style="width: 260px" v-model="jzbs"></el-input>
                              </el-radio-group>
                            </el-form-item>
                          </el-form>
                        </p>
                      </el-row>
                    </div>
        </el-card>

    <el-button type="primary" style="width: 100px" @click="bc">保存</el-button>
    <el-button style="width: 100px" @click="fh()">返回</el-button>
  </div>
</template>

<script>
import {h} from "vue";

export default {
  data() {
    return {
      fy:[],
      activeTab: 'healthArchives',
      residentInfo: {
      },
      healthInfo: {},
      gls: [],
      gms:"",
      jwd:"",
      jzs:"",
      jzbs:"",
      imageUrl:'',
      tj:false,
      dialogFormVisible:false,
      xs:[],
      gl:{},
    };
  },
  methods: {

    // 模糊查询
    handleInput(){
      this.axios.post(`http://localhost:8202/person/getById`,this.gl).then(res=>{
        this.gls = res.data.data;
      })
    },

    // 取消方法
    qx(){
     this.gl.name='';
     this.gl.gid='';
     this.gl.gx='';
    },
    //   确定方法
    qd(){


      for(var i=0;i<this.gls.length;i++){
        if(this.gl.gid==this.gls[i].id){
          this.gls[i].gx = this.gl.gx;
          this.xs.push(this.gls[i]);
        }
      }
      this.tj=true;
    },

    // 返回方法
    fh() {
      this.$router.push('/jmgl');
    },
    // 获取关联信息
    getRelationInfo() {
      if(this.$route.query.id!=null){
        this.gl.pid=this.$route.query.id;
      }
      this.axios.post(`http://localhost:8202/person/getById`, this.gl).then(res => {
        this.gls = res.data.data;
      })
    },
    //    获取信息
    getInfo() {
      this.axios.get(`http://localhost:8202/person/getInfo?id=${this.$route.query.id}`).then(res => {
        this.residentInfo = res.data.data;
        this.imageUrl=res.data.data.img;
        if(this.residentInfo.fy!=null){
          this.fy=res.data.data.fy.split(",");
        }

      })

    },

    //  获取用户的健康信息
    getHealthInfo() {
      this.axios.get(`http://localhost:8202/jkjl/getInfo?id=${this.$route.query.id}`).then(res => {
        this.healthInfo = res.data.data;

       if(this.healthInfo!=null){
         if(this.healthInfo.gms!=null && this.healthInfo.jwd!=null && this.healthInfojzs!=null && this.healthInfo.jzbs!=null){
           if(this.healthInfo.gms!='无'){
             this.gms=this.healthInfo.gms;
             this.healthInfo.gms='有';
           }
           if(this.healthInfo.jwd!='无'){
             this.jwd=this.healthInfo.jwd;
             this.healthInfo.jwd='有';
           }
           if(this.healthInfo.jzs!='无'){
             this.jzs=this.healthInfo.jzs;
             this.healthInfo.jzs='有';
           }
           if(this.healthInfo.jzbs!='无'){
             this.jzbs=this.healthInfo.jzbs;
             this.healthInfo.jzbs='有';
           }
         }else{
           this.healthInfo.gms='无';
           this.healthInfo.jwd='无';
           this.healthInfo.jzs='无';
           this.healthInfo.jzbs='无';
         }
       }else{
         this.healthInfo={};
       }
      })
    },


    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.residentInfo.img=res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    bc(){
      if(this.fy.length>1){
        this.residentInfo.fy=this.fy.join(",");
      }else{
        this.residentInfo.fy=this.fy[0];
      }



      if(this.healthInfo.gms!='无'){
        this.healthInfo.gms=this.gms;
      }
      if(this.healthInfo.jwd!='无'){
        this.healthInfo.jwd=this.jwd;
      }
      if(this.healthInfo.jzs!='无'){
        this.healthInfo.jzs=this.jzs;
      }
      if(this.healthInfo.jzbs!='无'){
        this.healthInfo.jzbs=this.jzbs;
      }

      if(this.$route.query.id!=null){
        this.healthInfo.pid=this.$route.query.id;
      }
      this.residentInfo.jid=this.healthInfo.id;
      // this.residentInfo.pid=this.healthInfo.pid;
      this.residentInfo.sg=this.healthInfo.sg;
      this.residentInfo.zl=this.healthInfo.zl;
      this.residentInfo.xx=this.healthInfo.xx;
      this.residentInfo.yx=this.healthInfo.yx;
      this.residentInfo.gms=this.healthInfo.gms;
      this.residentInfo.jwd=this.healthInfo.jwd;
      this.residentInfo.jzs=this.healthInfo.jzs;
      this.residentInfo.jzbs=this.healthInfo.jzbs;
      // console.log(this.gl)
      this.residentInfo.gid=this.gl.gid;
      this.residentInfo.pid=this.gl.pid;
      this.residentInfo.gx=this.gl.gx;
      console.log(this.residentInfo);
      this.axios.post(`http://localhost:8202/person/update`,this.residentInfo).then(res=>{

        // this.axios.post(`http://localhost:8202/jkjl/update`,).then(res=>{
        //   console.log(this.healthInfo)
          if(res.data.code==200){
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: '修改失败!'
            });
          }
          this.$router.push('/jmgl');
        })
      // });

    },
  },
  created() {
    if(this.$route.query.id!=null){
      this.getInfo();
      this.getHealthInfo();
    }else{
      var item = localStorage.getItem("form");
      this.residentInfo=JSON.parse(item);
      var item1 = localStorage.getItem("xs");
      this.xs=JSON.parse(item1);
      // this.gl.pid=this.$route.query.id
      this.gl.gid=this.residentInfo.gid
      this.gl.gx=this.residentInfo.gx
      console.log(this.gl)
      this.tj=true
    }
    this.getRelationInfo();
  }
}
</script>
